<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{width: 100px;height:100px;background: red}
        #box2{width: 100px;height:100px;background: green}
    </style>
</head>
<body>
    <div id="box"></div>
    <div id="box2"></div>
</body>
<script>

    var box = document.querySelector("#box")
    var box2 = document.querySelector("#box2")

    addEvent(box, "click", fn1);
    addEvent(box2, "click", fn2);
    addEvent(box, "mouseenter", fn2);
    
    removeEvent(box, "click", fn1);
    removeEvent(box2, "click", fn2);
    
    // 事件监听式绑定事件的兼容封装
    function addEvent(ele, type, cb){
        if(ele.attachEvent){
            ele.attachEvent("on" + type, cb)
        }else{
            ele.addEventListener(type, cb);
        }
    }
    
    // 事件监听式删除事件的兼容封装
    function removeEvent(ele, type, cb){
        if(ele.detachEvent){
            ele.detachEvent("on" + type, cb)
        }else{
            ele.removeEventListener(type, cb);
        }
    }
    







    function fn1(){
        console.log(1)
    }
    function fn2(){
        console.log(2)
    }
</script>
</html>